<template>
  <div>
    <div class="chat-message">
      <span class="chat-name">
        <b>发送者</b>
      </span>
      <span class="chat-content">
        <b>聊天内容</b>
      </span>
      <span class="chat-time">
        <b>发送时间</b>
      </span>
    </div>
    <div
      class="chat-message"
      v-for='(item,index) in chatMessageList'
      :key="`chat-${index}`"
    >
      <template v-if="item.msgType===0||item.msgType===1">
        <span class="chat-name">
          {{item.userName}}
        </span>
        <span class="chat-content">
          <template v-if="item.msgType===0">
            <span
              class="chat-content-text"
              v-html="dillText(item.content)"
            ></span>
          </template>
          <template v-else-if="item.msgType===1">
            <img
              class="img"
              :src="item.content"
              @click="showBig(item.content)"
            />
          </template>
        </span>
        <span class="chat-time">
          {{dateFormat(item.contentTime, "hh:mm:ss")}}
        </span>
      </template>
    </div>
  </div>
</template>

<script>
import { queryChatRecord } from '@/api/conferences'
import { dillText } from '@/utils/emotion'
import { dateFormat } from '@/utils/time'
export default {
  name: 'MeetingMessage',
  data () {
    return {
      dillText,
      dateFormat,
      chatMessageList: []
    }
  },
  created () {
    this.conferenceId = this.$route.query.conferenceId
  },
  mounted () {
    // 获取聊天记录
    this.handleQueryChatRecord()
  },
  methods: {
    // 获取聊天记录
    async handleQueryChatRecord () {
      const { data } = await queryChatRecord(this.conferenceId)
      this.chatMessageList = data
    }
  }
}
</script>

<style lang="scss" scoped>
.chat-message {
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 3px 12px;
  .chat-name {
    flex: 1;
  }
  .chat-content {
    flex: 3;
    .chat-content-text {
      width: 100%;
      word-break: break-all;
    }
  }
  .chat-time {
    flex: 1;
  }
}
</style>
